<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直居中布局</title>
    <style>
       #parent1{
           width: 2048px;
           height: 300px;
           background-color: #ccc;

           /* display属性
              table：设置当前元素为<table>元素
              table-cell：设置当前元素为<td>元素*/
           display: table-cell;
           /* vertical-align属性用于设置文本内容的垂直方向对齐方式
              top：顶部对齐
              middle：居中对齐
              bottom：底部对齐 */
           vertical-align: middle; 
       }
       #child1{
           width: 200px;
           height: 100px;
           background-color: red;

           text-align: center;
           line-height: 100px;

            /* 设置为table和block属性都可以 */
            display: table;
            /* margin：上右下左
            auto表示根据浏览器自动分配 */
            margin: 0 auto;
       }


       #parent2{
           width: 100%;
           height: 300px;
           background-color: #bbb;

           position: relative;
       }
       #child2{
           width: 200px;
           height: 100px;
           background-color: yellowgreen;

           text-align: center;
           line-height: 100px;

           position: absolute;
           /* 将元素顶部的边缘移动到父级元素的50%的位置 */
           top: 50%;
           left: 50%;
           /* 移动子级元素的的y的负方向的50% */
           transform: translate(-50%,-50%);
       }
    </style>
</head>
<body>
    <!-- table + margin属性实现水平居中
         table-cell + vertical-align实现垂直居中
         -->
     <div id="parent1">
        <div id="child1">
             居中对齐第一种方式
        </div>
     </div>

    <!-- absolute + transform属性配合使用实现水平和垂直居中 -->
    <div id="parent2">
        <div id="child2">
             垂直居中对齐第二种方式
        </div>
    </div>
</body>
</html>